<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible="open"
    width="900px"
    append-to-body
    @close="cancel"
  >
    <el-form
      size="small"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="150px"
      v-loading="loading"
    >
      <el-descriptions title="基本信息"></el-descriptions>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="企业编码" prop="companyCode">
            <el-input
              disabled
              v-model="form.companyCode"
              placeholder="系统自动生成"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码" prop="orgCode">
            <el-input
              v-model="form.orgCode"
              maxlength="18"
              placeholder="请输入统一社会信用代码"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input
              v-model="form.companyName"
              placeholder="请输入企业名称"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="简称" prop="companyAbbreviation">
            <el-input
              v-model="form.companyAbbreviation"
              placeholder="请输入简称"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="电话" prop="telephone">
            <el-input v-model="form.telephone" placeholder="请输入电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="form.contacts" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="联系电话" prop="mobile">
            <el-input
              v-model="form.mobile"
              placeholder="请输入11位手机号"
              @blur="setMobile"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="form.status"
              active-value="0"
              inactive-value="-1"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="!form.companyId">
        <el-divider></el-divider>
        <el-descriptions title="账号设置"></el-descriptions>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="企业登录账号" prop="userName">
              <el-input
                disabled
                v-model="form.userName"
                placeholder="请输入联系电话自动生成账号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业登录密码" prop="password">
              <el-input
                v-model="form.password"
                disabled
                placeholder="企业登录密码"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  getCompanyCodeAPI,
  createCompany,
} from "@/api/organization/transportCompany.js";
import { regexIsSocialcode } from "@/utils/validate";
import { getConfigKey } from "@/api/system/config.js";
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    id: {
      type: Number,
    },
  },
  dicts: ["company_size", "company_type"],
  created() {
    this.getCompanyCode();
    this.getConfigKey();
  },
  data() {
    const validateSocialcode = (rule, value, callback) => {
      if (!regexIsSocialcode(value)) {
        callback(new Error("信用代码格式错误"));
      } else {
        callback();
      }
    };
    return {
      // 表单参数
      form: {
        companyCode: "",
        orgCode: "123456788999987",
        companyName: "",
        companyAbbreviation: "",
        telephone: "",
        contacts: "",
        mobile: "",
        status: "0",
        userName: "",
        password: "",
      },
      // 表单校验
      rules: {
        // companyCode: [
        //   { required: true, message: "企业编码不能为空", trigger: "blur" },
        // ],
        userName: [
          { required: true, message: "账号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        orgCode: [
          {
            required: true,
            message: "统一社会信用代码不能为空",
            trigger: "blur",
          },
          {
            min: 15,
            max: 18,
            message: "统一社会信用代码为15-18字符",
            trigger: "blur",
          },
          // {
          //   validator: validateSocialcode,
          //   trigger: "blur",
          // },
        ],
        companyName: [
          { required: true, message: "企业名称不能为空", trigger: "blur" },
        ],
        companyAbbreviation: [
          { required: true, message: "简称不能为空", trigger: "blur" },
        ],
        leadingCadre: [
          {
            required: true,
            message: "企业负责人姓名不能为空",
            trigger: "blur",
          },
        ],
        companySize: [
          { required: true, message: "请选择企业规模", trigger: "change" },
        ],
        companyType: [
          {
            required: true,
            message: "请选择是否为装卸作业企业",
            trigger: "change",
          },
        ],
        contacts: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        registPlace: [
          { required: true, message: "地址不能为空", trigger: "blur" },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        mobile: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },
  methods: {
    async getCompanyCode() {
      const res = await getCompanyCodeAPI();
      console.log(res);
      this.form.companyCode = res.msg;
    },
    async getConfigKey() {
      const res = await getConfigKey("sys.user.initPassword");
      console.log(res);
      this.form.password = res.msg;
    },
    cancel() {
      console.log(111);
      this.$emit("cancel");
    },
    async submitForm() {
      try {
        await this.$refs.form.validate();
        await createCompany(this.form);
        this.$message.success("添加成功");
        this.$emit("submitSuccess");
      } catch (error) {}
    },
    async setMobile() {
      console.log(111);
      try {
        await this.$refs.form.validateField("mobile");
        this.form.userName = this.form.mobile;
      } catch (error) {}
    },
  },
};
</script>
